<template>
	<van-tabs v-model:active="currentType" swipeable color="blue" sticky @change="changeType" :z-index="10">
		<van-tab title='学生申请'>
			<view v-if="studentList.length">
				<view class="applyItem" v-for="(item,index) in studentList" :key="item.id">
					<view class="userAvatar">
						<image :src="item.User.avatarUrl" mode="aspectFill"></image>
					</view>
					<view class="name">{{item.User.username}}</view>
					<view class="conBth">
						<view class="bthPass bth" @click="handlePass(index,item)"><van-icon name="success"
								color="#76c84e" />
						</view>
						<view class="bthRefuse bth" @click="handleRefuse()"><van-icon name="cross" color="red" /></view>
					</view>
				</view>
			</view>
			<view class="noData" v-else>
				<view style="width: 100%; display: flex; justify-content: center">
					<image class="noDataImg" src="@/static/icons/noDataIcon.svg" mode="aspectFill"></image>
				</view>
				<view> 暂无数据 </view>
			</view>
		</van-tab>
		<van-tab title='教师申请'>
			<view v-if="teacherList.length">
				<view class="applyItem" v-for="(item,index) in teacherList" :key="item.id">
					<view class="userAvatar">
						<image :src="item.User.avatarUrl" mode="aspectFill"></image>
					</view>
					<view class="name">{{item.User.username}}</view>
					<view class="conBth">
						<view class="bthPass bth" @click="handlePass(index,item)"><van-icon name="success"
								color="#76c84e" />
						</view>
						<view class="bthRefuse bth" @click="handleRefuse()"><van-icon name="cross" color="red" /></view>
					</view>
				</view>
			</view>
			<view class="noData" v-else>
				<view style="width: 100%; display: flex; justify-content: center">
					<image class="noDataImg" src="@/static/icons/noDataIcon.svg" mode="aspectFill"></image>
				</view>
				<view> 暂无数据 </view>
			</view>
		</van-tab>
	</van-tabs>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		checkJoin,
		getClubJoinPlz
	} from '@/apis/apis';
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		throttle
	} from '@/utils/throttle.js'
	let clubId = null
	const checkList = ref([])
	onMounted(() => {
		onReachBottom(onPageBottom);
	});
	const onPageBottom = throttle(() => {
		if (page.value * 10 >= total.value)
			return
		page.value++; // 页码加1
		getClubJoinList()
	}, 500)
	const page = ref(1)
	const total = ref(-1)
	const getClubJoinList = () => {
		getClubJoinPlz({
			id: clubId,
			page: page.value,
			pageSize: 10
		}).then(res => {
			console.log(res)
			checkList.value = res.data
			total.value = res.joinCount
		})
	}
	onLoad((options) => {
		console.log(options)
		clubId = options.clubId
		getClubJoinList()

	})
	const studentList = computed(() => {
		return checkList.value.filter(item => item.role === 'member')
	})
	const teacherList = computed(() => {
		return checkList.value.filter(item => item.role === 'club_teacher')
	})

	const currentType = ref(0)
	const changeType = (e) => {
		currentType.value = e.detail.index
	}
	const handlePass = (index, item) => {
		uni.showModal({
			content: `确认通过用户“${item.User.username}"的申请吗`,
			success: function(res) {
				console.log(res)
				if (res.confirm) {
					uni.showLoading({
						title: '加载中'
					})
					checkJoin({
						id: item.id
					}).then(res => {
						console.log(res)
						if (res.status === 200) {
							uni.showToast({
								title: '审核成功!',
								icon: 'success'
							})
							setTimeout(() => {
								checkList.value.splice(index, 1)
							}, 500)
						}
					})
				} else if (res.cancel) {
					console.log('取消')
				}

			}
		})
	}
</script>

<style lang="less" scoped>
	.applyItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 130rpx;
		width: 84%;
		padding: 0 3%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;

		.userAvatar {
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.name {
			font-size: 33rpx;
			font-weight: 550;
			width: 50%;
			max-height: 95%;
			overflow: hidden;

		}

		.conBth {
			display: flex;
			width: 30%;
			justify-content: space-around;

			.bth {
				height: 70rpx;
				width: 70rpx;
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.bthPass {
				border: 1rpx #aedf96 solid;
				background-color: #f0f9eb;
			}

			.bthRefuse {
				border: 1rpx #fab6b6 solid;
				background-color: #fef0f0;
			}
		}
	}

	.noData {
		margin-top: 300rpx;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;

		image {
			height: 500rpx;
			width: 500rpx;
		}

		view {
			text-align: center;
			font-size: 45rpx;
		}
	}
</style>